<template>
  <el-icon :size="22" v-debounce:[300]="refresh" ref="refreshIcon"><RefreshRight /></el-icon>
</template>

<script setup>
import { RefreshRight } from '@element-plus/icons-vue';
import { usePageRefresh } from '@/hooks/usePageRefresh';
import { ref } from 'vue';
const { refreshCurrentPage } = usePageRefresh();

const refreshIcon = ref('');

const refresh = () => {
  refreshCurrentPage();
  // 图标旋转360度动画
  if (refreshIcon.value?.$el) {
    const iconEl = refreshIcon.value.$el;
    iconEl.style.transition = 'transform 0.6s ease';
    iconEl.style.transform = 'rotate(360deg)';

    // 动画结束后重置，以便下次旋转
    setTimeout(() => {
      iconEl.style.transition = 'none';
      iconEl.style.transform = 'rotate(0deg)';
    }, 600);
  }
};
</script>

<style lang="scss" scoped>
.el-icon {
  cursor: pointer;
}
</style>
